<script lang="ts" setup>
import * as yup from 'yup';
import { Form } from 'vee-validate';
interface Props {
  tipText?: string
}
defineOptions({
  name: 'PayPassword',
})
defineProps<Props>()

definePageMeta({
    layout: 'header-back',
    title: 'money_password'
})
const { t } = useI18n()
const router = useRouter()
const pwdFormRef = ref()
const { userInfo } = storeToRefs(useAppStore())
const { isSetPayPwd, runMemberAuthConfig } = useAuthConfig()
  // 验证成功过邮箱
  const isEmailVerify = computed(() => userInfo.value?.email_check_state === 1)
  
const { bool: isEmailCodeType, toggle: toggleCodeType } = useBoolean(isEmailVerify.value)

const schema = computed(() => yup.object().shape({
    payPassword: yup.string().required(t('money_password_placeholder')).matches(payPasswordReg, t('only_6_num')),
    againPayPassword: yup.string().oneOf([yup.ref('payPassword')], '两次输入的密码不一致').required('请确认密码')
}));

const {
  run: runMemberPayPasswordUpdate,
  loading: payPasswordUpdateLoading,
} = useRequest(ApiMemberPayPasswordUpdate, {
  onSuccess() {
    message.success(t('success_set_safe_pwd'))
    // 资金密码设置成功之后，刷新信息
    runMemberAuthConfig()
    router.back()
  },
})

const pwdRef = ref()
const mailCodeRef = ref()
// 提交资金密码
async function submitPayPwd() {
  const { values } = pwdFormRef.value
    runMemberPayPasswordUpdate({
        types: isSetPayPwd.value ? 2 : 1,
        old_pay_password: isSetPayPwd.value ? values.oldPayPassword : '',
        pay_password: values.payPassword,
        code: values.emailCode,
        code_type: isEmailCodeType.value ? 1 : 2,
    })
}
</script>

<template>
  <div class="m-[1rem] p-[1rem] rounded-[.5rem] bg-bg-black-4 mb-[3.75rem]">
    <div class="text-[.875rem] text-text-white-0 font-[600]">{{ t('money_password') }}</div>
    <div class="text-text-white-2 font-[.75rem] font-[600] mt-[.625rem] pb-[1rem] border-b border-b-bg-black-5" v-if="!isSetPayPwd">{{ t('first_withdraw_set_money_password') }}</div>
    <Form
        :validation-schema="schema"
        @submit="submitPayPwd"
        ref="pwdFormRef"
    >
         <BaseInput
            required
            :label="!isSetPayPwd ? t('money_password') : t('new_safe_pwd')"
            ref="pwdRef" input-mode="numeric"
            :placeholder="!isSetPayPwd
              ? t('money_password_placeholder') : t('new_safe_pwd_placeholder')"
            name="payPassword"
            class="mt-[1rem]"
            type="password"
            max="6"
        />
        <BaseInput
            input-mode="numeric"
            :placeholder="t('confirm_money_password_placeholder')"
            type="password"
            class="mt-[1rem]"
            max="6"
            name="againPayPassword"
            :label="t('confirm_money_password')"
            required
        />
        <BaseButton
            :loading="payPasswordUpdateLoading"
            class="w-full mt-[1rem]"
            htmlType="submit"
        >   {{ t('save') }}
        </BaseButton>
    </Form>
    <AppRechargeTip>
        <span class="text-function-green">{{t('common_on')}}</span>
        <span class="underline mr-[.5rem] text-function-green" @click="router.push('setting/two-factor-auth')">2FA</span>
        <span class="text-text-white-2">{{ t('recharge_2fa_tip') }}</span>
    </AppRechargeTip>
  </div>
</template>